<template>
  <el-button @click="openDialog">选择部门/人员</el-button>
  <DepartmentPersonsSelect v-model:visible="dialogVisible" :data="treeData" @confirm="handleConfirm"
    @cancel="handleCancel">
    <!-- <template #custom-content>
      <div>自定义内容</div>
    </template> -->
  </DepartmentPersonsSelect>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import DepartmentPersonsSelect from '@/components/DepartmentPersonsSelect/DepartmentPersonsSelect.vue';

const dialogVisible = ref(false);
const treeData = ref<any>([
  {
    id: 1,
    label: '广千集团',
    type: 'company',
    members: [
      { name: '张三', department: '产品部', position: '经理', company: '公司名称' },
      { name: '李四', department: '市场部', position: '专员', company: '公司名称' },
    ],
    children: [
      {
        id: 2,
        label: '产品部',
        type: 'department',
        members: [
          { name: '张三', department: '产品部', position: '经理', company: '公司名称' },
        ],
        children: [
          { id: 3, label: '销售组', type: 'department', members: [] },
          { id: 4, label: '市场组', type: 'department', members: [] },
        ],
      },
      {
        id: 5,
        label: '市场部',
        type: 'department',
        members: [
          { name: '李四', department: '市场部', position: '专员', company: '公司名称' },
        ],
      },
    ],
  },
]);

const openDialog = () => {
  dialogVisible.value = true;
};

const handleConfirm = (selected) => {
  console.log('选择的人员:', selected);
  dialogVisible.value = false;
};

const handleCancel = () => {
  dialogVisible.value = false;
};
</script>
